<template>
  <div class="header-two">
    <div class="header-hm">
      <el-row type="flex" justify="space-between">
        <el-page-header content="查看月卡" @back="fn" />
        <span style="float: right; padding: 3px 0" type="text">黑马管理员</span>
      </el-row>
    </div><br>
    <el-row type="flex" justify="center">
      <el-card class="box-card" style="width:1660px">
        <div slot="header" class="clearfix">
          <span>车辆信息</span>
        </div>
        <div style="margin:20px 140px" class="form-header">

          <div class="form-two">车主姓名：  <span>{{ formData.personName }} </span></div>

          <div class="form-two">联系方式：  <span>{{ formData.phoneNumber }}</span></div>

          <div class="form-two">车牌号码：  <span>{{ formData.carNumber }}</span></div>

          <div class="form-two">车辆品牌：  <span> {{ formData.carBrand }}</span></div>

        </div>
      </el-card>
    </el-row>

    <el-row type="flex" justify="center" style="margin:20px 0 0 0">
      <el-card class="box-card" style="width:1660px">
        <div slot="header" class="clearfix">
          <span>月卡缴费记录</span>
        </div>
        <div style="margin:20px 130px">
          <el-table :data="cardList">
            <el-table-column label="序号" type="index" :index="indexMethod" />
            <el-table-column label="有效时间" prop="cardEndDate">
              <template #default="{row}">
                {{ row.cardStartDate +'至'+ row.cardEndDate }}
              </template>
            </el-table-column>
            <el-table-column label="支付金额" prop="paymentAmount" />
            <el-table-column label="支付方式" prop="paymentMethod">
              <template #default="{row}">
                <span v-if="row.paymentMethod==='Alipay'">支付宝</span>
                <span v-else-if="row.paymentMethod==='WeChat'">微信</span>
                <span v-else-if="row.paymentMethod==='Cash'">线下</span>
              </template>
            </el-table-column>
            <el-table-column label="办理时间" prop="createTime" />
            <el-table-column label="办理人" prop="createUser" />
          </el-table>
        </div>
      </el-card>
    </el-row>

  </div>
</template>

<script>
import { lookCardAPI } from '@/api/monthCard'
export default {
  data() {
    return {
      time: '',
      formData: [],
      cardList: []
    }
  },
  created() {
    this.onEditCard()
  },
  methods: {
    // 返回上一页
    fn() {
      window.history.go(-1)
    },
    async onEditCard() {
      const res = await lookCardAPI(this.$route.params.id)
      this.formData = res.data
      console.log(res, 666666)
      this.cardList = res.data.rechargeList
      //   console.log(this.cardList)
      this.time = this.cardList.rechargeList.cardStartDate + `至` + this.cardList.rechargeList.cardEndDate
    },
    // 序号
    indexMethod(index) {
      // console.log(index, '我是index')
      return index + 1 // page是当前的页码，size是页码容量
    }
  }
}
</script>

<style scoped>
  .header-hm{
    height: 64px;
    padding: 20px 10px;
    background-color: #fff;
  }

.header-two{
      min-height: 100vh; /* 视口高度 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  background-color:#f4f6f8 ;
}
.form-header{
display: flex;
justify-content: space-between;
flex-basis: 50%;
flex-wrap: wrap;
}
.form-two{
    width: 600px;
    margin: 20px 0;
}
</style>
